import React from 'react';
import {Redirect} from 'react-router-dom';
import Logo from '../../component/logo/Logo';
import {List, InputItem, Radio, WingBlank, WhiteSpace, Button} from 'antd-mobile';
import {connect} from 'react-redux';
import {register} from "../../redux/user.redux";
import funForm from '../../component/form/form';
import '../../index.css';

@connect(
    state => state.user,
    {register}
)
@funForm
class Register extends React.Component {
    constructor(props) {
        super(props);
        this.handleRegister = this.handleRegister.bind(this);
        // this.state = {
        //     user: '',
        //     pwd: '',
        //     repeatPwd: '',
        //     type: 'genius'
        // };
    }

    handleRegister() {
        this.props.register(this.props.state);
    }

    componentDidMount(){
        this.props.handleChange('type', 'genius');
    }

    // handleChange(key, val) {
    //     this.setState({
    //         [key]: val
    //     })
    // }

    render() {
        const RadioItem = Radio.RadioItem;
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo}/> : null}
                <Logo/>
                <WingBlank>
                    {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
                    <List>
                        <InputItem onChange={(v) => this.props.handleChange('user', v)}>用户</InputItem>
                        <InputItem type='password' onChange={(v) => this.props.handleChange('pwd', v)}>密码</InputItem>
                        <InputItem type='password' onChange={(v) => this.props.handleChange('repeatPwd', v)}>确认密码</InputItem>
                        <RadioItem
                            checked={this.props.state.type === 'genius'}
                            onChange={() => this.props.handleChange('type', 'genius')}
                        > 牛人 </RadioItem>
                        <RadioItem
                            checked={this.props.state.type === 'boss'}
                            onChange={() => this.props.handleChange('type', 'boss')}
                        > BOSS </RadioItem>
                    </List>
                    <WhiteSpace/>
                    <Button type='primary' onClick={this.handleRegister}>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Register;